<template>
    <div v-if="gujia">
        <van-skeleton title :row="50" />
    </div>

    <div v-else>
        <!-- 搜索 -->
        <Search></Search>
        <van-tabs v-model:active="active">
            <van-tab title="标签 1">
                <!-- 轮播图 -->
                <Swiper></Swiper>
                <!-- 宫格 -->
            <div><img src="../img/QQ浏览器截图20250720201409.png" alt="" style="width: 100%;"></div>
                <div class="djs" style="position: relative;">
                    <h3 style="margin-left: 20px;">秒杀专场</h3>
                    <div style="position: absolute; top: -2px; left: 120px;">
                        <span>10点场</span>
                        <span
                            style="display: inline-block;background-color: rgb(255, 51, 0);padding: 5px 5px;margin: 2px;border-radius: 5px;color: #fff;">10</span>:
                        <span
                            style="display: inline-block;background-color: rgb(255, 51, 0);padding: 5px 5px;margin: 2px;border-radius: 5px;color: #fff;">58</span>:
                        <span
                            style="display: inline-block;background-color: rgb(255, 51, 0);padding: 5px 5px;margin: 2px;border-radius: 5px;color: #fff;">06</span>
                    </div>
                    <span style="position: absolute; right: 10px; top: 3px; color: gainsboro;">更多</span>

                </div>

                <van-grid :border="false" :column-num="4" :gutter="20">
                    <van-grid-item>
                        <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" /> <span>￥8:00</span>
                    </van-grid-item>
                    <van-grid-item>
                        <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" /> <span>￥8:00</span>
                    </van-grid-item>
                    <van-grid-item>
                        <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" /> <span>￥8:00</span>
                    </van-grid-item> <van-grid-item>
                        <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" /> <span>￥8:00</span>
                    </van-grid-item>
                </van-grid>
                <div class="a1" style="column-gap: 10;column-count: 2;">
                    <div style="height: 200px;">
                        <h5 style="height: 10px; margin: 10px;">福利社
                        </h5>
                        <span style="height: 10px; margin: 10px;">官方自营618全球购</span>
                        <div style="column-count: 2;">
                            <div><img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" alt="" style="width: 90px;
height: 90px;"></div>
                            <div></div>

                            <div><img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" alt="" style="width: 90px;
height: 90px;"></div>
                            <div>
                            </div>
                        </div>


                    </div>
                    <div style="height: 250px;">

                    </div>
                    <div style="height: 250px;">
                        <h5 style="height: 10px; margin: 10px;">福利社
                        </h5>
                        <span style="height: 10px; margin: 10px;">官方自营618全球购</span>
                        <div style="column-count: 2;">
                            <div><img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" alt="" style="width: 90px;
height: 90px;"></div>
                            <div></div>

                            <div><img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" alt="" style="width: 90px;
height: 90px;"></div>
                            <div>
                            </div>
                        </div>
                    </div>
                    <div style="height: 200px;"></div>

                </div>
            </van-tab>
            <van-tab title="标签 2">内容 2</van-tab>
            <van-tab title="标签 3">内容 3</van-tab>
            <van-tab title="标签 4">内容 4</van-tab>
        </van-tabs>
    </div>

</template>

<script setup>
import Search from '@/components/search.vue';
import Swiper from '@/components/swiper.vue';
import { ref } from 'vue';

let gujia = ref(true)
setTimeout(() => {
    gujia.value = false
}, 700)
</script>

<style lang="scss" scoped>
.yohuijuan {

    div {
        width: 90px;
        height: 90px;
        display: flex;
        float: left;
        flex-wrap: nowrap;
        flex-direction: row-reverse;
        margin-bottom: 20px;
    }

}

.pubu {
    column-count: 2;
    column-gap: 20px;

    div {
        display: inline-block;
        margin-bottom: 20px;
        width: 100%;

    }
}

.a1 {
    div {
        display: inline-block;
        width: 95%;
        border: solid 1px;
        margin-top: 10px;

        div {
            border: none;
        }
    }
}
</style>